<template>
    <div class="hp100">
        <TableList
            :columns="recordCol"
            :data="recordList"
            :page.sync="query.page"
            :size.sync="query.rows"
            :total="recordTotal"
            @queryFun="getRecord"
        ></TableList>
        <Modal
            v-model="showExamDetail"
            width="1000"
            footer-hide
            class-name="fix-height-modal"
            title="答题详情"
            @on-cancel="$emit('getExamDetail', exId)"
        >
            <exam-detail
                ref="examDetail"
                :examInfo="examDetail"
                :isGrader="true"
                :currentUserName="currentUserName"
                v-if="showExamDetail"
                @on-marking="getRecord()"
            ></exam-detail>
        </Modal>
        <Modal
            v-model="violationModal.show"
            title="违规记录"
            width="800"
            footer-hide
            @on-visible-change="violationModal.query.pageIndex = 1"
        >
            <TableList
                :columns="violationModal.col"
                :data="violationModal.list"
                :page="violationModal.query.pageIndex"
                :size="violationModal.query.pageSize"
                :total="violationModal.total"
                @queryFun="getViolationRecord"
                :style="{ minHeight: violationModal.total === 0 ? '300px' : '' }"
            ></TableList>
        </Modal>
    </div>
</template>
<script>
import examDetail from '@/view/experimentalScene/examPlan/exam/testedInfo.vue';
import { getUserAnswerList } from '@/api/exam.js';
export default {
    name: 'QuestionScore',
    props: [
        'classNumberId',
        'disbledAllBtn',
        'exId',
        'classId',
        'status',
        'examInfo',
        'type',
        'examDetail'
    ],
    components: { examDetail },
    data() {
        let _this = this;
        return {
            currentUserName: '',
            recordList: [],
            recordTotal: 0,
            recordCol: [
                // {
                //     title: '排行',
                //     key: 'rank',
                //     width: 60,
                //     show: this.classId ? true : false,
                //     render: (h, params) => {
                //         let ele;
                //         if (params.row._index < 3 && this.query.page == 1) {
                //             ele = h('img', {
                //                 attrs: {
                //                     src: require(`../../../../assets/exam/top${params.row._index +
                //                         1}.png`)
                //                 },
                //                 style: {
                //                     display: 'inline-block',
                //                     width: '20px'
                //                 }
                //             });
                //         } else {
                //             ele = h(
                //                 'span',
                //                 params.row._index + 1 + (this.query.page - 1) * this.query.rows
                //             );
                //         }
                //         return ele;
                //     }
                // },
                {
                    title: '学员昵称',
                    key: 'userName'
                },
                // {
                //     title: '班级',
                //     key: 'className',
                //     width: 120,
                //     show: this.classId ? true : false
                // },
                {
                    title: '分数',
                    key: 'grade'
                },
                {
                    title: '是否已评分',
                    key: 'checkStatus',
                    render: (h, params) => {
                        let flag = params.row.checkStatus === 0;
                        return h(
                            'span',
                            {
                                style: {
                                    color: flag ? 'var(--status-no)' : 'var(--status-yes)'
                                }
                            },
                            flag ? '否' : '是'
                        );
                    }
                },
                {
                    title: '是否参与考试',
                    key: 'submitStatus',
                    show: this.classId ? true : false,
                    render: (h, params) => {
                        return h(
                            'span',
                            {
                                style: {
                                    color:
                                        params.row.submitStatus == 1
                                            ? 'var(--status-yes)'
                                            : 'var(--status-no)'
                                }
                            },
                            params.row.submitStatus == 1 ? '是' : '否'
                        );
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    opList: [
                        {
                            txt: '评分',
                            fun: (data) => {
                                let userId = data.userId;
                                _this.showExamDetail = true;
                                this.currentUserName = data.userName;
                                setTimeout(() => {
                                    _this.$refs.examDetail.getUserAnswer('', userId, this.exId);
                                    _this.$refs.examDetail.getRankList(this.exId, userId);
                                });
                            },
                            disabled: (data) => {
                                return (
                                    _this.disbledAllBtn ||
                                    (_this.examDetail && _this.examDetail.status !== 3) ||
                                    (_this.examDetail && _this.examDetail.isQuestion == 0)
                                );
                            }
                        }
                    ]
                }
            ],
            query: {
                page: 1,
                rows: 10
            },
            violationModal: {
                show: false,
                query: {
                    pageIndex: 1,
                    pageSize: 10
                },
                list: [],
                total: 0,
                col: [
                    {
                        title: '违规者',
                        key: 'creatorName',
                        tooltip: true
                    },
                    {
                        type: 'showTime',
                        title: '违规时间',
                        key: 'createTime',
                        tooltip: true
                    },
                    {
                        title: '违规类型',
                        key: 'type',
                        tooltip: true,
                        filter: (type) => {
                            return '切屏操作';
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        opList: [
                            {
                                txt: '删除',
                                type: 'delete',
                                tooltip: true,
                                title: '你确定要删除吗?',
                                fun: (data) => {
                                    this.delViolationRecord(data.id);
                                }
                            }
                        ]
                    }
                ]
            },
            showExamDetail: false,
            timeout: ''
        };
    },
    watch: {
        classNumberId: function(val) {
            this.getRecord();
        }
    },
    filters: {},
    created() {},
    mounted() {
        if (this.classNumberId) {
            this.getRecord();
        }
    },
    beforeDestroy() {
        clearTimeout(this.timeout);
    },
    methods: {
        // getData(page, size) {
        //     this.query.page = page;
        //     this.query.rows = size;
        //     if (this.classNumberId) {
        //         this.getRecord();
        //     }
        // },
        getRecord() {
            if (this.type !== '考试') {
                return;
            }
            getUserAnswerList(Object.assign({}, this.query, { examinationId: this.exId })).then(
                (data) => {
                    if (data.code == 1) {
                        this.recordList = data.attribute.dataList;
                        this.recordTotal = data.attribute.totalCount;
                        clearTimeout(this.timeout);
                        if (this.status === 1) {
                            this.timeout = setTimeout(() => {
                                this.getRecord();
                            }, 5000);
                        }
                    } else {
                        this.$Message.error(data.message);
                    }
                }
            );
        },
        changePage(page) {
            this.query.page = page;
            this.getRecord();
        },
        // 获取违规记录
        getViolationRecord() {
            getViolationRecord({
                pageIndex: this.violationModal.query.pageIndex,
                pageSize: this.violationModal.query.pageSize,
                type: 0,
                examinationId: this.exId
            })
                .then(({ code, message, data }) => {
                    if (code !== 1) {
                        this.$Message.warning(message);
                    } else {
                        this.violationModal.total = data.total;
                        this.violationModal.list = data.items || [];
                    }
                })
                .catch(() => {
                    this.$Message.error('获取违规记录异常');
                });
        },
        changeViolationPage(page) {
            this.violationModal.query.pageIndex = page;
            this.getViolationRecord();
        },
        delViolationRecord(id) {
            delViolationRecord(id)
                .then(({ code, message }) => {
                    if (code !== 1) {
                        this.$Message.warning(message);
                    } else {
                        this.$Message.info('删除违规记录成功');
                        this.violationModal.query.pageIndex =
                            this.violationModal.query.pageIndex > 1 &&
                            this.violationList.length === 1
                                ? this.violationModal.query.pageIndex - 1
                                : this.violationModal.query.pageIndex;
                        this.getViolationRecord();
                    }
                })
                .catch(() => {
                    this.$Message.error('删除违规记录异常');
                });
        }
    }
};
</script>
<style scoped></style>
